<template>
	<view class="content">
		<view class="flex ll ac">
			<radio v-if="type == 2" :checked="info.checked" color="#3254c3" @click="checkedCb" />
			<view class="img">
				<image style="width: 70px; height: 70px;" :src="base + info.imageUrl"></image>
			</view>
			<view style="flex: 1; height: 70px;" class="flexC bw">
				<view>
					<view class="f16 bold c3">{{ info.productName }}</view>
					<view class="c80" v-if="info.salesVolume">月售{{ info.salesVolume }}</view>
				</view>
				<view class="flexB">
					<view class="bold f16 theme">¥{{ info.sellingPrice || info.price }}</view>
					<view class="flex">
						<view class="del bb" v-if="type!='pay' && (info.cartsNum > 0 || info.num)" @click="addItem(1)">-</view>
						<view class="num">{{ info.cartsNum ||  info.num }}</view>
						<span  v-if="type=='pay'">件</span>
						<view class="add bb" v-if="type!='pay'" @click="addItem(2)">+</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['info', 'type'],
	data() {
		return {
			base: this.$base,
			page: 1,
			list: []
		}
	},
	onLoad() {
	},
	methods: {
		checkedCb() {
			this.$emit('checked')
		},
		addItem(n) {
			if (n == 1) { //del
				this.changeNum(-1)
			} else { //add
				if(this.type==2) { //car
					this.changeNum(1);
				} else { //list
					this.addCb();
				}
			}
		},

		addCb() {
			this.$request({
				url: '/carts/addCarts',
				data: {
					productId: this.info.productId,
					num: 1
				}
			}).then(res => {
				this.$parent.getCar();
				this.$parent.getItem(this.info.cateId);
			})
		},

		changeNum(n) {
			this.$request({
				url: '/carts/modifyCartsNum',
				data: {
					productId: this.info.productId,
					num: (this.info.cartsNum || this.info.num) + n,
				}
			}).then(res => {
				let ll = (this.info.cartsNum || this.info.num) + n;
				console.log(3333, ll);
				if(ll==0) {
					this.$request({
						url: '/carts/deleteProductCarts',
						data: {
							productId: this.info.productId,
						}
					}).then(res=>{
						this.$emit('update', this.info.cateId);
					});
				} else {
					this.$emit('update', this.info.cateId);
				}
			})
		}

	}
}
</script>

<style lang="scss">
.bb {
	width: 20px;
	height: 20px;
	line-height: 15px;
	border: 2px solid #3254c3;
	color: #3254c3;
	text-align: center;
	border-radius: 50%;
	font-weight: bold;
	font-size: 18px;
}

.add {
	background: #3254c3;
	color: #fff;
}

.num {
	width: 30px;
	line-height: 25px;
	text-align: center;
	color: #333;
	font-size: 14px;
}

.ll {
	margin: 16px 0;
}

.img {
	width: 70px;
	height: 70px;
	border-radius: 4px;
	margin-right: 10px;
	background: #a1ade8;
}
</style>